<template>
	<view class="m-box" :class="{'pro-content-background' : showBackImg}">
		<view class="f-box">
			<scroll-view style="height: calc(100vh - 30px);" class="scroll-Y" ref="sro" id="sro"
				@scrolltolower="getMyOrderList(false)" scroll-y="true" :scroll-top="scrollTop">
				<view class="f-item"
					:style="{ 'background-image' : item.auditState > 0 ? (item.auditState == 1 ? (item.state == 0 ? '' : style3) : style1) : style2 }"
					v-for="(item,index) in infoList" :key="index" @click="toDetail(index)">
					<view>
						<image class="f-img" :src="item.imgUrls[0]"></image>
					</view>
					<view style="padding: 5px;">
						<view class="f-txt">
							{{item.title}}
						</view>
						<view class="f-label">
							<view>{{item.typeName}}</view>
						</view>
						<view class="f-bottom">
							<view style="display: flex;">
								<view>
									<image style="width: 16px; height: 16px;margin-right: 4px;"
										src="/static/imgs/map.png">
									</image>
								</view>
								<view>{{item.areaName}}</view>
							</view>
							<view style="display: flex;">
								<view>
									<image style="width: 16px; height: 16px;margin-right: 4px;"
										src="/static/imgs/zan.png">
									</image>
								</view>
								<view>{{item.likeNum}}</view>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	import {
		orderApis
	} from '@/apis/index'
	export default {
		data() {
			return {
				showBackImg: false,
				style1: "url('../../../static/imgs/no_pass.png')",
				style2: "url('../../../static/imgs/daishenhe.png')",
				style3: "url('../../../static/imgs/expire.png')",
				pageSize: 10,
				pageNum: 1,
				infoList: []
			}
		},
		methods: {
			toDetail(index) {
				let info = this.infoList[index]
				uni.setStorageSync('orderDetail', info);

				uni.navigateTo({
					url: '../detail/detail'
				});
			},

			getMyOrderList(flag) {
				var _this = this
				let jisuanHeight = 500
				if (flag) {
					_this.pageNum = 1
				} else {
					_this.pageNum++

					jisuanHeight = _this.pageNum * jisuanHeight
				}

				let para = {
					pageNum: _this.pageNum,
					pageSize: _this.pageSize
				}
				orderApis.getMyOrderList(para).then((res) => {
					if (flag) {
						_this.infoList = res.data.data.rows

						if (_this.infoList.length == 0) {
							this.showBackImg = true
						}
					} else {
						var list = res.data.data.rows
						var oldList = _this.infoList
						if (list.length != 0) {
							for (var i = 0; i < list.length; i++) {
								var data = list[i]
								oldList.push(data)
							}

							_this.infoList = oldList
							_this.scrollTop = jisuanHeight
						}
					}
				})
			}
		},
		mounted() {
			this.getMyOrderList(true)
		}
	}
</script>

<style ang="scss" scoped>
	.m-box {
		/* padding: 20px; */
		height: 100vh;
		overflow-y: scroll;
	}

	.f-box {
		padding: 13px;
	}

	.f-item {
		background-color: white;
		display: flex;
		padding: 2px;
		border-radius: 5px;
		margin-bottom: 10px;
		/* background-image: url('../../../static/imgs/no_pass.png'); */
		background-repeat: no-repeat;
		background-position: center center;
		background-size: contain;
		background-position-x: 195px;
	}

	.f-img {
		height: 100px;
		width: 130px;
		border-radius: 5px;
	}

	.f-txt {
		font-size: 13px;
		font-weight: bold;
		margin-left: 5px;
		margin-bottom: 5px;
		width: 208px;
		height: 35px;
	}

	.f-label {
		margin-left: 5px;
		display: flex;
	}

	.f-label view {
		color: white;
		// line-height: 28px;
		font-size: 13px;
		padding: 3px;
		border-radius: 2px;
		background-color: green;
		margin-right: 5px;
	}

	.f-bottom {
		margin-top: 10px;
		margin-left: 5px;
		display: flex;
		justify-content: space-between;
		color: #ababab;
		font-size: 12px;
	}

	.pro-content-background {
		background-image: url('../../../static/imgs/nofind.png');
		background-repeat: no-repeat;
		background-position: center center;
	}
</style>